<template>
	<div class="container-admin">
		<div class="wrapper-table">
			<div class="table-title">用户列表</div>
			<div style="text-align: right; padding: 5px 0">
				<el-button type="primary" @click="showUserDialog('add')"
					>添加用户</el-button
				>
			</div>
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="username" label="用户"></el-table-column>
				<el-table-column prop="password" label="密码"></el-table-column>
				<el-table-column
					prop="datetime"
					label="日期"
					width="180"
				></el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button
							@click="showUserDialog('edit', scope.row)"
							type="text"
							size="small"
							>编辑
						</el-button>
						<el-button
							@click="deleteUser(scope.row)"
							type="text"
							size="small"
							>删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<el-dialog
			:title="userDialogTitle"
			:visible.sync="userDialogVisible"
			center
			width="30%"
		>
			<el-form :model="form" label-position="left">
				<el-form-item label="用户" :label-width="formLabelWidth">
					<el-input
                        :disabled="isEditUser"
						v-model="form.username"
						autocomplete="off"
					></el-input>
				</el-form-item>
				<el-form-item label="密码" :label-width="formLabelWidth">
					<el-input
						v-model="form.password"
						autocomplete="off"
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="userDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleUser">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { apiGetUserList, apiDeleteUser, apiRegister, apiUpdateUser } from '../../apis/index';

export default {
	name: 'adminindex',
	data() {
		return {
			tableData: [
				{
					datetime: '2016-05-02',
					username: 'koa',
					address: '12345',
				},
				{
					datetime: '2016-05-04',
					username: 'koa1',
					address: '12345',
				},
			],
			userDialogVisible: false,
			isEditUser: false,
			userDialogTitle: '添加用户',
			form: {
				username: '',
				password: '',
			},
			formLabelWidth: '60px',
		};
	},
	created() {},
	mounted() {
		this.getUserList();
	},
	methods: {
		async getUserList() {
			let res = await apiGetUserList();
			if (res.code === 0) {
				this.tableData = res.data;
			}
		},
		handleClick(row) {
			console.log(row);
		},
		async deleteUser(row) {
			console.log(row.username);
			let res = await apiDeleteUser({ username: row.username });
			if (res.code === 0) {
				this.$message.success(res.msg);
				this.getUserList();
			}
		},
		showUserDialog(flag, row) {
			this.userDialogVisible = true;
			if (flag === 'add') {
				// ^ 添加
				this.isEditUser = false;
				this.form = {
					username: '',
					password: '',
				};
			} else {
				// ^ 编辑
				console.log(row);
				this.isEditUser = true;
				this.userDialogTitle = '编辑用户';
				this.form = row;
			}
		},
		async handleUser() {
		    if (!this.isEditUser) {
		        // ^ 添加
                let res = await apiRegister(this.form);
                console.log(res);
                if (res.code === 0) {
                    this.$message.success('添加成功');
                    this.userDialogVisible = false;
                    this.getUserList();
                } else {
                    this.$message.warning(res.msg);
                }

            } else {
                // ^ 编辑
                let res = await apiUpdateUser(this.form);
                if (res.code === 0) {
                    this.userDialogVisible = false;
                    this.$message.success(res.msg);
                }

            }
		},
	},
};
</script>

<style lang="scss" scoped>
.container-admin {
	padding: 0 5%;

	.wrapper-table {
		text-align: left;
		border: 1px solid #42b983;
		padding: 10px 20%;

		.table-title {
			font-size: 18px;
			margin: 16px 0;
		}
	}
}
</style>
